<template>
	<view>
		横向布局：
		<view class="row">
			<view class="box bg-blue">A</view>
			<view class="box bg-green">B</view>
			<view class="box bg-red">C</view>
		</view>
		纵向布局:
		<view class="coloum">
			<view class="box2 bg-blue">D</view>
			<view class="box2 bg-green">E</view>
			<view class="box2 bg-red">F</view>
		</view>
		其他布局: 
		(1) 居中
		<viewa class="row other-box-center">
			<view class="item">横向布局-居中</view>
			<view class="item">横向布局-居中</view>
		</view>
		<view>居右</view>
		<view class="row other-box-right">
			<view class="item">横向布局-居右</view>
			<view class="item">横向布局-居右</view>
		</view>
	</view>
	
</template>

<script>
</script>

<style>
	.box{
		height: 200px;
		width: 33.3%;
		text-align: center;
		line-height: 200upx;
		color: #FFFFFF;
	}
	.box2{
		height: 200upx;
	}
	.bg-red{
		background-color: #aa0000;
	}
	.bg-blue{
		background-color: #007AFF;
	}
	.bg-green{
		background-color: #4CD964;
	}
	.row{
		display: flex;
		flex-direction: row;
		/* 默认横排显示 */
	}
	.coloum{
		display: flex;
		flex-direction: column-reverse;
	}
		/* 其他布局样式 */
	.item{
		height: 80upx;
		line-height: 80upx;
		background-color: #e3e3ea;
		margin: 10upx;
		padding: 10upx;
	}
	.other-box-center{
		justify-content: center;
		-webkit-justify-content:center;
	}
	.other-box-right{
		justify-content: flex-end;
		-webkit-justify-content: flex-end;
	}
</style>